<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑房间</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
	<form class="layui-form">
	
	  <div class="layui-form-item">
		 <label class="layui-form-label">照片 </label>
		 <div class="layui-input-block">
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test1">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo1" style="width:92px;height:92px;">
					<p id="demoText"></p>
				</div>
				<div style="width: 95px;">
					<div class="layui-progress layui-progress-big"
						lay-showpercent="yes" lay-filter="demo">
						<div class="layui-progress-bar" lay-percent=""></div>
					</div>
				</div>
			</div>
			<a name="list-progress"> </a>
		</div>
	  </div>
	
	
	
	
	
		<div class="layui-form-item">
			<label class="layui-form-label">房间号</label>
			<div class="layui-input-block">
				<input type="text" name="number" required lay-verify="required"
					placeholder="请输入房间号" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="0" title="大床房"> <input
					type="radio" name="type" value="1" title="标准间" checked> <input
					type="radio" name="type" value="2" title="三人间">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-block">
				<input type="text" name="dscp" placeholder="输入房间描述"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单价</label>
			<div class="layui-input-block">
				<input type="text" name="price" required lay-verify="required"
					placeholder="输入房间单价" class="layui-input" value="288">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="0" title="正常"> <input
					type="radio" name="status" value="1" title="删除" > 
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="hidden" name="id">
				<input type="hidden" name="pic">
				<button type="submit" class="layui-btn" lay-submit
					lay-filter="edit-room">立即提交</button>
			</div>
		</div>
	</form>
</body>



<script type="text/javascript" src="/layui/layui.js"></script>

<script type="text/javascript">
	layui.use([ 'form','upload','element','layer'], function() {
		var form = layui.form;
		$ = layui.$;
		
		var upload =  layui.upload,
		element=layui.element,
		layer=layui.layer;
		
		var room = JSON.parse(sessionStorage.getItem('room'));
		//id
		$("input[name='id']").val(room.id);
		$("input[name='number']").val(room.number);
		$("input[name='dscp']").val(room.dscp);
		$("input[name='price']").val(room.price);
		$("input[name='type'][value='" + room.type + "']").attr('checked',
				'checked');
		$("input[name='status'][value='" + room.status + "']").attr('checked',
				'checked');
		
		if(room.pic) 
		{
			$('#demo1').attr('src','/upload/'+room.pic);
			$("input[name='pic']").val(room.pic);
		}
		
		
		var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#demo1').attr('src', result); //图片链接（base64）
		      });
		      
		      element.progress('demo', '0%'); //进度条复位
		      layer.msg('上传中', {icon: 16, time: 0});
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功的一些操作
		      //
		      $("input[name='pic']").val(res.data);
		      
		      
		      //……
		      $('#demoText').html(''); //置空上传失败的状态
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		    //进度条
		    ,progress: function(n, elem, e){
		      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
		      if(n == 100){
		        layer.msg('上传完毕', {icon: 1});
		      }
		    }
		  });
		
	
		
		form.render();
		
		form.on('submit(edit-room)',function(data){
			$.ajax({
				url: '/api/room/edit',
				data: data.field,
				type: 'post',
				dataType: 'json',
				success: function(result){
					if(result.code>0){
						parent.layer.msg('修改成功');
						parent.layer.closeAll("iframe");
					}
					else{
						layer.msg(result.msg);
					}
				},
				error:function(){
					layer.msg('请求失败');
				}
			});
			return false;
		});
		
	});
</script>
</html>